<template>
  <div class="student-file-system">
    <!-- 主页面按钮 -->
    <div class="main-actions">
      <el-button @click="showUploadModal = true" class="primary-btn">
        <i class="el-icon-upload"></i> 上传学员档案
      </el-button>
      <el-button @click="showFileConfirmation = true" class="secondary-btn">
        <i class="el-icon-edit"></i> 编辑档案信息
      </el-button>
    </div>


    <!-- 1. 文件上传模态框 -->
    <file-upload-modal
      :visible="showUploadModal"
      :students="students"
      :businessId="classId"
      :defaultMode="defaultMode"
      @update:visible="val => showUploadModal = val"
      @confirm="handleUploadConfirm"
      @close="handleModalClose"
    />


    <!-- 2. 档案上传确认组件 -->
    <FileUploadConfirmation
      :visible.sync="showFileConfirmation"
      :user-data="studentInitialData"
      dialog-title="员工档案上传确认"
      dialog-width="85%"
      @single-confirm="handleFileSubmit"
      @confirm="handleFileSubmit"
      @midway-confirm="handleMidwaySave"
      @close="closeAllModals"
    />


    <!-- 3. 操作结果提示 -->
    <el-dialog
      :visible.sync="showResultDialog"
      :title="resultSuccess ? '操作成功' : '操作失败'"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="result-content">
        <i class="el-icon-check-circle success-icon" v-if="resultSuccess"></i>
        <i class="el-icon-error-circle error-icon" v-else></i>
        <p>{{ resultMessage }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showResultDialog = false">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>


<script>
import FileUploadModal from "@/components/FileUpload/FileUploadModal.vue";
import FileUploadConfirmation from '@/components/FileUpload/FileUploadConfirmation.vue';


export default {
  components: {
    FileUploadModal,
    FileUploadConfirmation
  },
  data() {
    return {
      //档案数量
      fileLimit:6,
      // 模态框控制
      showUploadModal: false,
      showFileConfirmation: false,
      showResultDialog: false,


      // 结果信息
      resultSuccess: false,
      resultMessage: '',
      submitResult: null,


      // 上传配置
      defaultMode: "0", // 覆盖模式 (cover 0 / append 1)
      classId: "1001", // 报名id


      // 学员列表数据
      students: [
        { id: 1, name: "张三", requirements: ["身份证", "报名表"] },
        { id: 2, name: "李四", requirements: ["成绩单"] }
      ],


      // 学员初始档案数据（模拟从后端获取）
      studentInitialData: [
        {
          id: 1,
          name: "张三",
          registrationId:"1",
          urls: [
            "http://127.0.0.1:9300/statics/2025/09/24/1_20250924100151A032.jpg",//http://127.0.0.1:9300/statics/2025/09/19/IMG_00000001_20250919113221A008.jpg
            "http://127.0.0.1:9300/statics/2025/09/19/1_20250919113116A007.png",//http://127.0.0.1:9300/statics/2025/09/19/1_20250919113116A007.png
            "", // 空URL表示需要上传
            "",
            "",
            "",
          ],
          remark:"",
          fileTypes: [  // 与urls长度相同
            "idFront",
            "idBack",
            "",
            "",
            "",
            "",
          ],
        },
        {
          id: 2,
          name: "李四",
          registrationId:"2",
          urls: [
            "",//http://127.0.0.1:9300/statics/2025/09/19/1_20250919113028A006.jpg
            "",
            "",
            "",
            "",
            "",
          ],
          remark:"",
          fileTypes: [  // 与urls长度相同
            "",
            "",
            "",
            "",
            "",
            "",
          ],
        }
      ]
    };
  },
  methods: {
    /**
     * 处理FileUploadModal的确认事件
     * 上传完成后自动跳转到确认页面，并更新学员档案数据
     */
    handleUploadConfirm(result) {
      console.log("文件上传完成，开始处理数据：", result);

      // 关闭上传模态框
      this.showUploadModal = false;

      // 核心：更新学员档案数据（按姓名分组URL）
      this.updateStudentDataAfterUpload(result);

      // 显示确认页面
      this.showFileConfirmation = true;

      // 滚动到页面顶部
      window.scrollTo(0, 0);
    },


    /**
     * 处理FileUploadConfirmation的提交事件
     */
    handleFileSubmit(submitData) {
      console.log('档案信息提交，数据结构：', submitData);

      // 保存提交结果（调试用）
      this.submitResult = submitData;

      // 模拟API请求（实际项目替换为真实接口）
      setTimeout(() => {
        // 显示成功提示
        this.resultSuccess = true;
        this.resultMessage = "档案信息已成功保存至服务器";
        this.showResultDialog = true;

        // 关闭确认页面
        this.showFileConfirmation = false;
      }, 800);
    },
    handleMidwaySave(submitData) {
      console.log('中途保存数据（当前及之前用户）:', submitData);
      // 调用后端接口保存数据（示例）
      // this.$api.saveStudentFiles(submitData).then(res => {
      //   if (res.success) {
      //     this.$message.success('中途保存成功！');
      //     // 可选：更新本地 studentInitialData，保持与后端同步
      //   } else {
      //     this.$message.error('中途保存失败：' + res.message);
      //   }
      // }).catch(err => {
      //   this.$message.error('中途保存接口异常：' + err.message);
      // });
    },


    /**
     * 关闭所有模态框/组件
     */
    closeAllModals() {
      this.showUploadModal = false;
      this.showFileConfirmation = false;
    },


    /**
     * 处理上传模态框关闭事件
     */
    handleModalClose() {
      // console.log("上传模态框已手动关闭");
      this.showUploadModal = false;
    },


    /**
     * 核心方法：上传后更新学员档案数据（按姓名分组URL）
     * @param {Object} uploadResult - 上传结果数据（含fileDetails和relativePath）
     */
    updateStudentDataAfterUpload(uploadResult) {
      // 1. 校验上传结果有效性
      if (!uploadResult || !uploadResult.fileDetails || uploadResult.fileDetails.length === 0) {
        this.$message.warning("未获取到有效上传文件，学员档案未更新");
        return;
      }

      try {
        // 2. 按学员姓名分组URL（从relativePath提取姓名，新格式：test/学员姓名/文件名）
        const studentUrlMap = this.groupUrlsByStudentName(uploadResult.fileDetails);
        if (Object.keys(studentUrlMap).length === 0) {
          this.$message.warning("未从文件路径中提取到有效学员姓名，无法更新档案");
          return;
        }

        // 3. 根据分组结果更新对应学员的URLs
        this.updateStudentUrlsByGroup(studentUrlMap,uploadResult.uploadMode);

        // 4. 提示更新结果
        const updatedStudentCount = Object.keys(studentUrlMap).length;
        this.$message.success(`已成功更新${updatedStudentCount}名学员的档案，共新增${uploadResult.fileDetails.length}个文件`);

      } catch (error) {
        // console.error("更新学员档案时发生错误：", error);
        this.$message.error(`档案更新失败：${error.message || '未知错误'}`);
      }
    },


    /**
 * 辅助方法1：从fileDetails中按学员姓名分组URL（核心：解析relativePath）
 * @param {Array} fileDetails - 上传文件详情数组（含relativePath和url）
 * @returns {Object} 学员姓名→URL数组的映射（格式：{ "张三": [url1, url2] }）
 * @description 适配三层路径格式：任意前缀/学员姓名/文件名.后缀
 */
  groupUrlsByStudentName(fileDetails) {
    const studentUrlMap = {};

    fileDetails.forEach((file, index) => {
      // 1. 基础校验：文件详情必须包含relativePath和url
      if (!file.relativePath || !file.url) {
        // console.warn(`第${index + 1}个文件信息不完整（缺少路径或URL），跳过处理`);
        return;
      }

      // 2. 解析路径：按"/"分割，过滤空片段（处理前后斜杠导致的空值）
      const pathSegments = file.relativePath.split("/")
        .filter(segment => segment.trim() !== "");

      // 3. 格式校验：必须满足三层结构 "任意前缀/学员姓名/文件名" → 至少3个有效片段
      if (pathSegments.length < 3) {
        // console.warn(`第${index + 1}个文件路径格式错误（应为"任意前缀/学员姓名/文件名"）：${file.relativePath}，跳过处理`);
        return;
      }

      // 4. 提取学员姓名：第2个有效片段（索引1，三层结构中固定为学员姓名位置）
      const studentName = pathSegments[1].trim()
        .replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, ""); // 只保留中文、字母、数字

      // 5. 姓名有效性校验
      if (!studentName) {
        // console.warn(`第${index + 1}个文件路径中未提取到有效学员姓名：${file.relativePath}，跳过处理`);
        return;
      }

      // 6. 分组URL（去重，避免重复添加同一文件）
      if (!studentUrlMap[studentName]) {
        studentUrlMap[studentName] = [];
      }
      if (!studentUrlMap[studentName].includes(file.url)) {
        studentUrlMap[studentName].push(file.url);
        // console.log(`文件关联成功：学员「${studentName}」→ 文件名「${file.name}」→ URL「${file.url}」`);
      } else {
        // console.log(`文件已存在：学员「${studentName}」的「${file.name}」无需重复添加`);
      }
    });

    return studentUrlMap;
  },


    /**
     * 辅助方法2：根据姓名分组结果，更新studentInitialData对应学员的URLs
     * @param {Object} studentUrlMap - 学员姓名→URL数组的映射
     */
    updateStudentUrlsByGroup(studentUrlMap,uploadMode) {
      this.studentInitialData.forEach((student, studentIndex) => {
        // 找到当前学员在分组中的新URL列表
        const newUrls = studentUrlMap[student.name] || [];
        if (newUrls.length === 0) return; // 无对应新URL，跳过当前学员

        // 1. 保留学员原有非空URL（避免覆盖已存在的有效档案）
        const existingValidUrls = student.urls.filter(url => url && url.trim() !== "");
        console.log(`学员「${student.name}」原有有效档案数：${existingValidUrls.length}个`);

        // 2. 合并原有URL和新URL（去重处理）
        const mergedUrls = [...new Set([...existingValidUrls, ...newUrls])];
        console.log(`学员「${student.name}」合并后总档案数：${mergedUrls.length}个`);

        // 3. 按规则限制文件数量
        const fileLimit = this.fileLimit; // 所有学员最多6个文件
        const finalUrls = mergedUrls.slice(0, fileLimit); // 超过限制时截取前N个

        // 4. 补充空URL至限制数量（保持界面显示一致，空URL对应"点击上传"提示）
        const emptyUrlCount = fileLimit - finalUrls.length;
        for (let i = 0; i < emptyUrlCount; i++) {
          finalUrls.push("");
        }

        // 5. 响应式更新学员URLs（必须用$set确保Vue检测到数组变化）
        this.$set(student, "urls", finalUrls);
        // console.log(uploadMode)
        // if(uploadMode === "1"){
        //   console.log(student.urls)
        //   const mergedUrls = [...new Set([...student.urls, ...newUrls])];student.urls
        //   console.log(mergedUrls)
        //   this.$set(student, "urls", mergedUrls);
        // }else{
        //   console.log(newUrls)
        //   this.$set(student, "urls", newUrls);
        // }

        // 6. 日志提示最终结果
        const addedCount = mergedUrls.length - existingValidUrls.length;
        // console.log(
        //   `学员「${student.name}」档案更新完成：新增${addedCount}个，当前共${finalUrls.filter(url => url).length}个有效档案（限制${fileLimit}个）`
        // );
      });
    },


    /**
     * 刷新学员数据（从后端获取最新数据，实际项目使用）
     */
    refreshStudentData() {
      this.$message.info('正在从服务器刷新最新档案数据...');

      // 模拟API请求（实际项目替换为真实接口）
      setTimeout(() => {
        // 响应式更新学员初始数据
        // this.studentInitialData = mockNewData;
        this.$message.success('档案数据已刷新，与服务器保持同步');
      }, 1000);
    }
  },
  watch: {
    // 监听结果对话框关闭，刷新数据（确保与服务器同步）
    showResultDialog(newVal) {
      if (!newVal && this.resultSuccess) {
        this.refreshStudentData();
      }
    }
  }
};
</script>


<style scoped>
/* 全局容器样式 */
.student-file-system {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Inter', 'Microsoft YaHei', sans-serif;
}


/* 主按钮区域样式 */
.main-actions {
  margin-bottom: 30px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.primary-btn {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.secondary-btn {
  background-color: #67c23a;
  color: white;
  border-color: #67c23a;
}


/* 确认页面容器样式 */
.confirmation-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 20px;
}

.confirmation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e0e0e0;
}

.confirmation-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2329;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #86909c;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-btn:hover {
  background-color: #e5e6eb;
  color: #1f2329;
}


/* 结果对话框样式 */
.result-content {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.success-icon {
  color: #67c23a;
  font-size: 28px;
  margin-right: 15px;
}

.error-icon {
  color: #f56c6c;
  font-size: 28px;
  margin-right: 15px;
}

.result-content p {
  font-size: 16px;
  margin: 0;
  color: #1f2329;
}

.dialog-footer {
  text-align: center;
}


/* 调试结果区域样式 */
.debug-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 6px;
  box-sizing: border-box;
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.debug-header h3 {
  margin: 0;
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.close-debug {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.2s;
}

.close-debug:hover {
  color: #333;
}

.result-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 400px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}


/* 响应式适配（小屏幕优化） */
@media (max-width: 768px) {
  .student-file-system {
    padding: 10px;
  }

  .main-actions {
    flex-direction: column;
    gap: 10px;
  }

  .confirmation-header {
    padding: 12px 16px;
  }

  .confirmation-header h2 {
    font-size: 16px;
  }

  .result-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .success-icon, .error-icon {
    margin-right: 0;
    margin-bottom: 5px;
  }
}
</style>
